<script setup lang="ts">
import { useRouter } from 'vue-router'
// 封装需求❓：支持 title rightText 属性，支持 click-right 事件，click-left函数内支持返回上一页或默认首页

// 1. 父传子
const props = defineProps<{
  title?: string
  rightText?: string
  // 接收一个函数
  closeFn?: () => void
}>()

// 2. 子传父
const emit = defineEmits<{
  (e: 'click-right'): void
}>()

const router = useRouter()
const onClickLeft = () => {
  // 点击左侧图标执行
  console.log('点击左侧图标执行')
  if (props.closeFn) {
    // 如果传递了关闭弹层的函数，就优先执行，下边代码就不执行了
    return props.closeFn()
  }
  // 支持：click-left函数内支持返回上一页或默认首页
  if (history.state.back) {
    // 存在上次页面地址
    router.back()
  } else {
    // 不存在跳转默认首页
    router.push('/')
  }
}
const onClickRight = () => {
  // 点击右侧文字执行
  console.log('点击右侧文字执行')
  emit('click-right')
}
</script>

<template>
  <div class="box">
    <!-- 
        说明： left-arrow ===等价于 :left-arrow="true"
       -->
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      fixed
      :title="title"
      :right-text="rightText"
      @click-right="onClickRight"
    ></van-nav-bar>
  </div>
</template>

<style lang="scss" scoped>
/**
深度作用选择符产生的背景：
最早引入scoped为了解决组件间样式冲突（同名类名样式的冲突）
 */

// 深度作用选择符=》覆盖组件库样式
::v-deep() {
  .van-nav-bar {
    &__arrow {
      // 控制.van-nav-bar__arrow类名样式
      font-size: 18px;
      color: var(--cp-text1);
    }

    // 控制.van-nav-bar__text类名样式
    &__text {
      font-size: 15px;
    }
  }
}
</style>
